<template>
  <div :style="detail" class="weather-page">
    <mt-header title="天气查询" class="header">
      <router-link to="/weather" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>

    <div class="container">
      <h2>
        <Icon type="ios-pin-outline" />
        {{ cityData.city }}
      </h2>
      <h5>{{ myDate }}</h5>
      <h1>{{ cityData.realtime.temperature }}<span class="degree">°</span></h1>
      <h4>{{ cityData.realtime.info }}</h4>
    </div>

    <Row class="forecast-row">
      <Col span="6" v-for="item in cityData.future" :key="item.date" class="forecast-col">
        <p>{{ item.date | myDay }}</p>
        <p><img :src="getIcon(item.wid.day)" class="forecast-icon" /></p>
        <p>{{ item.weather }}</p>
        <p>{{ item.temperature }}</p>
      </Col>
    </Row>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      detail: {
        height: '100%',
        background: '',
        backgroundSize: 'cover',
        color: '#fff'
      }
    };
  },
  methods: {
    getIcon(wid) {
      wid = parseInt(wid);
      let pic = 0;
      if (wid === 0) {
        pic = 0;
      } else if (wid === 3 || (wid >= 6 && wid <= 12) || (wid >= 21 && wid <= 25)) {
        pic = 2;
      } else if (wid === 4 || wid === 5) {
        pic = 4;
      } else if ((wid >= 13 && wid <= 17) || (wid >= 26 && wid <= 28)) {
        pic = 3;
      } else if (wid === 20 || (wid >= 29 && wid <= 53)) {
        pic = 5;
      } else {
        pic = 1;
      }
      return `/images/icon/${pic}.png`;
    }
  },
  beforeMount() {
    this.$store.commit('showTabbar', false);
  },
  mounted() {
    const num = Math.floor(Math.random() * 11) + 1;
    this.detail.background = `url("/images/background/${num}.jpg") no-repeat`;
    if (!this.$store.state.cityData.length) {
      this.$store.dispatch('getCityData');
    }
  },
  beforeDestroy() {
    this.$store.commit('cityNameMutation', '');
    this.$store.commit('cityDataMutation', []);
    this.$store.commit('showTabbar', true);
  },
  computed: {
    ...mapState(['cityData']),
    myDate() {
      const d = new Date();
      return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`;
    }
  },
  filters: {
    myDay(data) {
      const i = new Date(data).getDay();
      const days = ['日', '一', '二', '三', '四', '五', '六'];
      return `星期${days[i]}`;
    }
  }
};
</script>

<style lang="scss" scoped>
.weather-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f9f9f9;
  color: #fff;
}

.header {
  background-color: #11aa66;
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

h1 {
  position: relative;
  font-size: 120px;
  margin: 0;
}

.degree {
  position: absolute;
  top: -10px;
  font-size: 40px;
}

h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

h4 {
  font-size: 18px;
  margin-top: 10px;
}

h5 {
  font-size: 16px;
  margin-bottom: 20px;
}

.forecast-row {
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
}

.forecast-col {
  text-align: center;
  padding: 10px;
  color: #fff;
}

.forecast-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}

p {
  margin: 5px 0;
}
</style>
